<template>
    <div class="page_container">
        <div class="page_container_scroll">
            <a-card :bordered="false" class="mb-2">
                <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState"
                    class="ant-advanced-search-form">
                    <a-row :gutter="24">
                        <a-col :span="6">
                            <a-form-item label="项目名称" name="code">
                                <a-input-search v-model:value="searchFormState.proName" style="width: 100%"
                                    placeholder="请选择项目" @click="onSearch" @search="onSearch" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-button type="primary" class="mr-2" @click="loadData()">查询</a-button>
                            <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </a-card>
            <a-card :bordered="false">
                <div class="mb-2" style="display: flex; justify-content: space-between">
                    <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.role" style="width: 120px" :options="roles"
                        :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                    </a-select>
                    <a-space>
                        <a-button type="primary" @click="onOpen()">
                            <template #icon>
                                <plus-outlined />
                            </template>
                            <span>新增</span>
                        </a-button>
                    </a-space>
                </div>

                <a-table :key="tableKey" :defaultExpandAllRows="true" :defaultExpandedRowKeys="defaultExpandedRowKeys"
                    bordered ref="tableRef" :dataSource="dataSource" :columns="columns" :pagination="false" class="mb-2"
                    :scroll="{ x: 1000 }">

                    <template #bodyCell="{ column, record, index }">
                        <template v-if="column.key === 'index'">
                            {{ index + 1 }}
                        </template>
                        <template v-if="column.key === 'directorName'">

                            {{ record.userList?.map(x => x.name).join(',') }}

                        </template>


                        <template
                            v-if="column.key === 'planStartTime' || column.key === 'planEndTime' || column.key === 'actualStartTime' || column.key === 'actualEndTime'">
                            {{ record[column.key]?.substring(0, 10) }}
                        </template>

                        <template v-if="column.key === 'process'">

                            <a-progress :percent="record.process" />

                        </template>



                        <template v-if="column.key === 'control'">
                            <div>
                                <a @click="onAdd(record)">添加任务</a>
                                <a-divider type="vertical" />
                                <a @click="onOpen(record)">编辑</a>
                                <a-divider type="vertical" />
                                <a-popconfirm v-if="record.children.length == 0" title="确定删除此数据源？"
                                    @confirm="remove(record)">
                                    <a-button type="link" danger size="small">删除</a-button>
                                </a-popconfirm>
                            </div>
                        </template>
                    </template>
                </a-table>

            </a-card>

            <a-drawer :title="isEdit ? '编辑进度跟踪进度' : '新建进度跟踪'" :width="1000" :visible="showEdit"
                :body-style="{ paddingBottom: '80px' }" placement="right" :style="{ position: 'absolute' }"
                :footer-style="{ textAlign: 'right' }" @close="showEdit = false">
                <div>
                    <edit @onClose="onClose" :disabled="isEdit" ref="editRef"></edit>
                </div>
                <template #footer>
                    <a-button type="primary" @click="submit">保存</a-button>
                    <a-button style="margin-left: 10px" @click="showEdit = false">取消</a-button>
                </template>
            </a-drawer>

            <projectSelection ref="proSelect" @onClose="prSelectOk" />
        </div>
    </div>
</template>

<script setup name="other">
import api from '@/api/pm/protask/index'
import { roles } from '@/utils/constants.js'
import edit from './components/edit.vue'
import projectSelection from '@/components/pm/projectSelection.vue'
const isEdit = ref(false);
const editRef = ref()
const showEdit = ref(false)
const tableRef = ref()

const onClose = (refresh) => {
    showEdit.value = false
    if (refresh) {
        loadData()
    }
}
const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const prSelectOk = (selectedRowKeys, selectRecords) => {
    console.log("项目选择ok ", selectedRowKeys, selectRecords)
    searchFormState.value.proId = selectRecords[0].id
    searchFormState.value.proName = selectRecords[0].name
    loadData()
}

const searchFormState = ref({
})

const infoOnOpen = () => {
    infoRef.value.show(record)
}
const refresh = () => {
    loadData()
}
const columns = [
    // {
    //     title: '序号',
    //     dataIndex: 'index',
    //     key: 'index',
    //     width: 80,
    //     align: 'center',
    // },

    // {
    //     title: '项目编号',
    //     dataIndex: 'proCode',
    //     key: 'proCode',
    //     width: 100,
    //     align: 'center',
    // },
    {
        title: '任务名称',
        dataIndex: 'name',
        key: 'name',
        width: 300,

    },
    {
        title: '责任人',
        dataIndex: 'directorName',
        key: 'directorName',
        width: 200,
        align: 'center',
    },


    // {
    //     title: '操作人',
    //     dataIndex: 'createUserName',
    //     key: 'createUserName',
    //     width: 120,
    //     align: 'center',
    // },
    {
        title: '计划开始时间',
        dataIndex: 'planStartTime',
        key: 'planStartTime',
        width: 120,
        align: 'center',
    },
    {
        title: '计划结束时间',
        dataIndex: 'planEndTime',
        key: 'planEndTime',
        width: 120,
        align: 'center',
    },
    {
        title: '实际开始时间',
        dataIndex: 'actualStartTime',
        key: 'actualStartTime',
        width: 120,
        align: 'center',
    },
    {
        title: '实际结束时间',
        dataIndex: 'actualEndTime',
        key: 'actualEndTime',
        width: 120,
        align: 'center',
    },
    {
        title: '进度',
        dataIndex: 'process',
        key: 'process',
        width: 120,
        align: 'center',
        fixed: 'right'
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 240,
        align: 'center',
        fixed: 'right'
    },
]
const defaultExpandedRowKeys = ref([])
const dataSource = ref([])
const tableKey = ref("table:")
const loadData = () => {


    if (!searchFormState.value.proId) {
        return
    }
    return api.page(searchFormState.value).then((res) => {


        res.forEach(item => {
            defaultExpandedRowKeys.value.push(item.id)
        });
        tableKey.value = "table:" + new Date().getTime()
        dataSource.value = res;
        // return {
        //     "records": res,
        //     "total": res.length,
        //     "size": res.length,
        //     "current": 1,
        //     "orders": [],
        //     "optimizeCountSql": true,
        //     "searchCount": true,
        //     "maxLimit": null,
        //     "countId": null,
        //     "pages": 1
        // };
    })
}
const onAdd = (record) => {
    showEdit.value = true
    nextTick(() => {

        let newRecord = {
            proId: searchFormState.value.proId,
            proName: searchFormState.value.proName,
            pid: record.id
        }

        editRef.value.show(newRecord)
    })
}
const onOpen = (record) => {
    if (!searchFormState.value.proId) {
        return
    }
    showEdit.value = true
    console.log(record)
    nextTick(() => {
        if (!record) {

            record = {
                proId: searchFormState.value.proId,
                proName: searchFormState.value.proName
            }
        }
        editRef.value.show(record)
    })
    // if (record) { 
    //     isEdit.value = true
    //  } else { 
    //     isEdit.value = false }
}

const remove = (record) => {
    api.delete([{ "id": record.id }]).then(() => {
        loadData()
    })
}
const reset = () => {
    searchFormState.value = {}
}
const submit = () => {
    editRef.value.submit()
}

const setDefaultValue = () => {
    console.log("setDefaultValue")
    proSelect.value.getDefaultValue().then(records => {
        console.log("default", records)
        if (records) {
            searchFormState.value.proId = records[0].id
            searchFormState.value.proName = records[0].name
            loadData()
        }
    })
}
nextTick(() => {
    setDefaultValue();
})


</script>
<style scoped></style>
